<template>
  <div>
    <div class="login_con">

      <v-canvas></v-canvas>
      <div class="login_box">
        <div class="Vendor">
          <span>商户登录</span>
        </div>
        <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" class="demo-ruleForm">
          <el-form-item prop="phone">
            <el-input prefix-icon="el-icon-mobile-phone" type="text" placeholder="请输入手机号" v-model="ruleForm2.phone" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入密码" v-model="ruleForm2.password" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="code"><slider-code @ztai="verification" :phone="ruleForm2.phone" :password="ruleForm2.password"></slider-code></el-form-item>
          <el-form-item style="line-height: 20px">
            <el-checkbox fill="#4b95ff" v-model="checked">记住密码</el-checkbox>

            <router-link class="password-w" to="./forgetPassword">忘记密码？</router-link>
          </el-form-item>
          <button class="login-but" @click.prevent="loginForm()">登 录</button>

          <router-link class="register" to="./reg">注册商户</router-link>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters,mapActions } from 'vuex';
import sliderCode from '../../components/yzma';
import { apiLogin } from '../../request/api';
import vCanvas from '../../components/loginBg.vue';
import {hideLoading, showLoading} from "../../components/loading";
export default {
  name: 'Login',
  components: {
    sliderCode: sliderCode,
    vCanvas
  },
  data() {
    return {
      // 上面是生成验证码的
      checked: true,
      // 登录表单的数据绑定对象
      ruleForm2: {
        phone: '',
        password: '',
        code: '1111'
      },
      // 这是表单额验证规则对象
      rules2: {
        // 验证手机号是否合法
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '手机长度在 6-15 个字符',
            trigger: 'blur'
          }
        ],
        // 验证密码
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '密码长度在 6 -15 个字符',
            trigger: 'blur'
          }
        ],
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      },
      verificationCode: ''
    };
  },
  computed:{
    ...mapGetters(['userName','userPassword']),
  },
  methods: {
    ...mapActions(['setUserConfig']),

    verification(val) {
      this.verificationCode = val;
    },
    loginForm() {
      // 自定义验证规则
      this.$refs.ruleForm2.validate(async valid => {
        if (!valid) return;
        // 向后台发起验证
        if (this.verificationCode != true) {
          this.$message.error('验证失败!!');
          return;
        }

        // 记住密码
        // if (this.checked == true) {
        //   window.localStorage.setItem('user', JSON.stringify(this.ruleForm2));
        // } else {
        //   window.localStorage.removeItem('user');
        // }
        this.$isClick(true);
        apiLogin(this.ruleForm2).then(res => {
          this.$isClick(false);
          if (res.code != 1) return this.$message.error(res.code == '6' ? '登录出现问题' : res.msg);
          this.$message.success('登录成功');
          // 将登录成功的token保存到本地存储
          window.localStorage.removeItem("tagsList");
          window.localStorage.setItem('token',res.token)
          window.localStorage.setItem('phone',this.ruleForm2.phone)
          window.localStorage.setItem('password',this.ruleForm2.password)
          // this.setUserInfo({
          //   token: res.token,
          //   name: this.ruleForm2.phone,
          //   password: this.ruleForm2.password
          // })

          this.setUserConfig({
            showNoticeModal: 1
          })
          setTimeout(()=>{
            this.$router.push('/home');
          },300)
        });
      });
    }
  },
  // 记住密码渲染到input
  created() {
    let token =  window.localStorage.getItem('token')
    if(token){
       this.$router.push('/home');
    }
    let phone = window.localStorage.getItem('phone')
    if (phone) {
      this.ruleForm2.phone = phone
      this.ruleForm2.password = window.localStorage.getItem('password')
      return;
    }
  }
};
</script>
<style lang="less" scoped>
  page{

  }
a {
  text-decoration: none;
}
.login_con {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  // background-image: url(../../assets/image/login_lg.jpg);
  // background-color:black;
  // background-image:
  // radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
  // radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
  // radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
  // radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  // background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  // background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

.login_box {
  background-color: hsla(228,52%,53%,0.50);
  box-shadow: 10px 10px 31px -5px rgba(0,0,0,0.7);
  -webkit-box-shadow: 10px 10px 31px -5px rgba(0,0,0,0.7);
  -moz-box-shadow: 10px 10px 31px -5px rgba(0,0,0,0.7);
  width: 336px;
  height: 414px;
  border-radius: 3px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 32px;
  z-index: 99;
}

.avatar {
  display: block;
  width: 60px;
  height: 60px;
  margin: auto;
  box-shadow: 0, 0, 10px;
  padding-top: 40px;
  img {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
  }
}

.Vendor {
  margin: 14px 0 20px;
  color: #fff;
  font-size: 24px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 14px;
  text-align: center;
}
.Vendor-u {
  display: inline-block;
  margin-left: 10px;
  color: #bfbfbf;
  font-size: 14px;
}
.input-min {
  width: 60%;
}
.verification {
  display: inline-block;
  width: 110px;
  margin-left: 16px;
  height: 40px;
  display: inline-block;
  vertical-align: middle;
  img {
    transform: scale(1);
    transition: all 0.5s ease;
  }
}
.password-w {
  float: right;
  color: rgb(153, 153, 153);
  text-decoration: none;
}
.password-w:hover {
  color: red;
}
.login-but {
  display: block;
  width: 100%;
  margin: 20px 0;
  background: @themeColor;
  color: #fff;
  border: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.register {
  display: block;
  color: #999;
  margin: 20px 0;
  text-align: center;
  font-size: 18px;
}
</style>
